<template>
  <div class="nav">
    <div class="topper">
      <van-cell title="消息">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-icon name="search" class="search-icon" />
      </template>
      </van-cell>
    </div>
    <div class="middle">
      <img src="../my/pic/najie.png" alt="">
      <p>这里暂时什么都没有哦</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
</script>

<style lang="less" scoped>
.nav{
  width: 100%;
  height: 100%;
  background-color: rgb(241, 249, 249);
  .topper{
    .search-icon {
    font-size: 16px;
    line-height: inherit;
    }
    :deep(.van-cell){
      background-color: rgb(241, 249, 249);
    }
    :deep(.van-cell){
      font-size: 20px;
      font-weight: 510;
    }
    :deep(.van-icon-search:before){
      font-size: 25px;
    }
  }
  .middle{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    img{
      border-radius: 100px;
    }

  }
}



</style>
